<template>
  <div class="all-menu">
    <!-- <div class="webjurisdictionItem">
			<div class="jurisdictionTitle">系统权限</div>
			<multipleSelection ref="pcmSelection" :dataList="pcmRightList" style="height: 320px;" :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
		</div> -->
    <!-- <div class="top-btn">
           <button :class="{'tabActive':tabPage == 0}"  @click="tabPage = 0">WEB权限</button>
		      <button :class="{'tabActive':tabPage == 1}"  @click="tabPage = 1">APP权限</button>
		      <button :class="{'tabActive':tabPage == 2}" @click="tabPage = 2">MINI权限</button>
		</div> -->
    <div class="userList-top">
      <div :class="['list-item',{'item-active':tabPage == index}]" v-for="(item,index) in tabPageList" :key="index"
        @click="tabPage = index">
        <span :class="['name',{'span-active':tabPage == index}]">{{item}}</span>
      </div>
    </div>

    <div v-show="tabPage ==0">
      <el-table id="demo" ref="multipleTable" :data="menuRightList" style="width: 100%" row-key="id"
        :tree-props="{children: 'next', hasChildren: 'hasChildren'}" :max-height="heights"
        @selection-change="handleSelectionChange">
       
        <el-table-column type="selection" width="44" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="name" width="287"></el-table-column>
        <el-table-column label="图形文件" prop="iconFile" width="287"></el-table-column>
        <el-table-column label="网站页面" prop="webpage"></el-table-column>
        <el-table-column label="描述" prop="memo"></el-table-column>

      </el-table>
    </div>

    <div v-show="tabPage == 1">
      <el-table id="demo" ref="multipleTableApp" :data="appRightList" style="width: 100%" row-key="id"
        :tree-props="{children: 'next', hasChildren: 'hasChildren'}" :max-height="heights"
        @selection-change="handleSelectionChangeApp">
        
        <el-table-column type="selection" width="44" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="name" width="287"></el-table-column>
        <el-table-column label="图形文件" prop="iconFile" width="287"></el-table-column>
        <el-table-column label="网站页面" prop="webpage"></el-table-column>
        <el-table-column label="描述" prop="memo"></el-table-column>

      </el-table>
    </div>

    <div v-show="tabPage == 2">
      <el-table id="demo" ref="multipleTableMini" :data="miniRightList" style="width: 100%" row-key="id"
        :tree-props="{children: 'next', hasChildren: 'hasChildren'}" :height="heights"
        @selection-change="handleSelectionChangeMini">
       
        <el-table-column type="selection" width="44" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="name" width="287"></el-table-column>
        <el-table-column label="图形文件" prop="iconFile" width="287"></el-table-column>
        <el-table-column label="网站页面" prop="webpage"></el-table-column>
        <el-table-column label="描述" prop="memo"></el-table-column>

      </el-table>
    </div>
    <!-- <div style="overflow: hidden;overflow-y: scroll; max-height: 800px;padding-left: 20px;">
			<div class="webjurisdictionItem">
				<div class="tree-head">
					<table class="tree-table">
						<tr>
							<td class="td1">名称</td>
							<td class="td2">图形文件</td>
							<td class="td3">网站页面</td>
							<td class="td4">描述</td>
						</tr>
					</table>
				</div>
				

				
				<multipleSelection ref="menuSelection" 
				:dataList="menuRightList" style="height:100%" 
				:selectionType="selectionType" :getIdMethod="item => item.id" v-show="tabPage ==0"></multipleSelection>

				<multipleSelection ref="appSelection" 
				:dataList="appRightList" style="height: 100%;" 
				:selectionType="selectionType" :getIdMethod="item => item.id" v-show="tabPage ==1"></multipleSelection>

				<multipleSelection ref="miniSelection"
				 :dataList="miniRightList" style="height: 100%;" 
				 :selectionType="selectionType" :getIdMethod="item => item.id" v-show="tabPage ==2"></multipleSelection>

			</div>
			
				

		</div> -->
  </div>
</template>

<script>
  import roleManagerStore from './roleManagerStore.js'
  export default {
    components: {
    },
    props: {

    },
    data () {
      return {
        tabPage: 0,
        heights: document.getElementById('app').clientHeight-220,//屏幕高度 - 导航栏高度
        selectionType: 'multiple',
        // tabPageList: ['WEB权限'],
        tabPageList: ['WEB权限','APP权限','MINI权限'],
        selecWeb: [],
        selecApp: [],
        selecMini: [],
        // pcmRightList: undefined,
      }
    },
    created () {},
    mounted () {
      this.coverCheckedIds()
    },
    destroyed () {

    },
    computed: {
      user () {
        return roleManagerStore.state.nowRole
      },
      unit () {
        return roleManagerStore.state.nowUnit
      },
      allRightList () {
        return roleManagerStore.state.allRightDatas
      },
      menuRightList () {
        // console.log("roleManagerStore.state.allRightDatas.menuRight",roleManagerStore.state.allRightDatas.menuRight);
        return roleManagerStore.state.allRightDatas.menuRight
      },
      appRightList () {
        return roleManagerStore.state.allRightDatas.appRight
      },
      miniRightList () {
        return roleManagerStore.state.allRightDatas.miniRight
      },
      nowMenuCheckedIds: {
        get: function() {
          return roleManagerStore.state.nowUserMenuRightIds
        },
        set: function(newValue) {
          return roleManagerStore.state.nowUserMenuRightIds=newValue
        }
      },
      /* nowAppCheckedIds() {
        return roleManagerStore.state.nowUserAppRightIds
      }, */
      editDisableMenuList () {
        return roleManagerStore.state.editDisableMenuList
      },
      /* editDisableAppList() {
        return roleManagerStore.state.editDisableAppList
      }, */
      userRolesRights () {
        return roleManagerStore.state.nowUserRolesRights
      },
      needSave () {
        var resultMenu=false
        //var resultApp = false
        if(isempty(this.menuRightList)) {
          resultMenu=false
        } else {
          var menuRight=[]
          var menuKeys=Object.keys(this.$refs.menuSelection.nowSelectIds)
          for(let i=0;i<menuKeys.length;i++) {
            if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]) {
              menuRight.push(menuKeys[i])
            }
          }

          if(this.nowMenuCheckedIds.length==menuRight.length) {
            for(let i=0;i<menuRight.length;i++) {
              if(this.nowMenuCheckedIds.indexOf(menuRight[i])<0) {
                resultMenu=true
                break
              }
            }
          } else {
            resultMenu=true
          }
        }


        if(!resultMenu) {
          return false
        } else {
          return true
        }
      }
    },
    watch: {
      nowMenuCheckedIds (nv,ov) {
        this.resetDatas()
      },
      menuRightList (nv) {
        if(nv.length!=0) {
          this.tranWebMenu()
        }
      },
      appRightList (nv) {
        if(nv.length!=0) {
          this.tranAppMenu()
        }
      },
      miniRightList (nv) {
        if(nv.length!=0) {
          this.tranMiniMenu()
        }
      },

    },
    methods: {
      //默认选中web菜单
      tranWebMenu () {
        var that=this
        var webList=this.menuRightList
        var webArr=[]
        var arr=[]
        var recursiveFunction=function() {
          const getStr=function(list) {
            list.forEach(function(row) {
              if(row.next.length!=0) {
                // console.log("row.ChildDatas",row);
                webArr.push(row)
                getStr(row.next)
              } else {
                webArr.push(row)
              }
            })
          }
          getStr(webList)
        }
        recursiveFunction()
        setTimeout(() => {
          that.nowMenuCheckedIds.forEach(item => {
            arr=webArr.filter(t => t.id==item)
            if(arr.length!=0) {
              that.$refs.multipleTable.toggleRowSelection(arr[0],true)
            }
          })
        },200)
      },
      //默认选中app菜单
      tranAppMenu () {
        var that=this
        var webList=this.appRightList
        var webArr=[]
        var arr=[]
        var recursiveFunction=function() {
          const getStr=function(list) {
            list.forEach(function(row) {
              if(row.next.length!=0) {
                // console.log("row.ChildDatas",row);
                webArr.push(row)
                getStr(row.next)
              } else {
                webArr.push(row)
              }
            })
          }
          getStr(webList)
        }
        recursiveFunction()
        setTimeout(() => {
          that.nowMenuCheckedIds.forEach(item => {
            arr=webArr.filter(t => t.id==item)
            if(arr.length!=0) {
              that.$refs.multipleTableApp.toggleRowSelection(arr[0],true)
            }
          })
        },200)
      },
      //默认选中mini菜单
      tranMiniMenu () {
        var that=this
        var webList=this.miniRightList
        var webArr=[]
        var arr=[]
        var recursiveFunction=function() {
          const getStr=function(list) {
            list.forEach(function(row) {
              if(row.next.length!=0) {
                // console.log("row.ChildDatas",row);
                webArr.push(row)
                getStr(row.next)
              } else {
                webArr.push(row)
              }
            })
          }
          getStr(webList)
        }
        recursiveFunction()
        setTimeout(() => {
          that.nowMenuCheckedIds.forEach(item => {
            arr=webArr.filter(t => t.id==item)
            if(arr.length!=0) {
              that.$refs.multipleTableMini.toggleRowSelection(arr[0],true)
            }
          })
        },200)
      },

      //WEB菜单
      handleSelectionChange (val) {
        // console.log("选中",val);
        this.selecWeb=val
      },
      //App菜单
      handleSelectionChangeApp (val) {
        this.selecApp=val
      },
      //Mini菜单
      handleSelectionChangeMini (val) {
        this.selecMini=val
      },


      resetDatas () {

      },
      saveEdit () {

        var menuRight=[]
        this.selecWeb.forEach(item => {
          menuRight.push(item.id)
        })
        var appRight=[]
        this.selecApp.forEach(item => {
          appRight.push(item.id)
        })
        var miniRight=[]
        this.selecMini.forEach(item => {
          miniRight.push(item.id)
        })
        var rightArr=menuRight.concat(appRight,miniRight)
        var rightIds=rightArr.join(',')
        this.$api.roleApi.addRoleRight(this.user.id,rightIds,res => {
          this.$message({showClose: true,message: '保存成功',type: 'success'});
        },failure => {
          if(failure) {
            this.$message.error(failure);
          } else {
            this.$message.error('修改失败');
          }
        })
      },
      resetCheckedIds () {
        var webRight=[]
        var menuKeys=Object.keys(this.$refs.menuSelection.nowSelectIds)

        for(let i=0;i<menuKeys.length;i++) {
          if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]) {
            webRight.push(menuKeys[i])
          }
        }

        this.nowMenuCheckedIds=webRight
        //this.nowAppCheckedIds = appRight
      },
      coverCheckedIds () {
        // console.log("nowMenuCheckedId设置默认选中",this.nowMenuCheckedIds);
        // this.$refs.multipleTable.toggleRowSelection(this.nowMenuCheckedIds);
        // this.$refs.menuSelection.setNowCheckedIds(this.nowMenuCheckedIds)
      }
    }
  }
</script>

<style scoped lang="scss">
  .all-menu {
    padding: 12px 20px 20px 20px;
    box-sizing: border-box;
  }

  .webjurisdictionItem {
    /* border: solid 1px #E4E4E4; */
    box-sizing: border-box;
    /* float: left; */
    /* margin-right: 30px; */
    /* width: calc(100% - 15px); */
    /* width: 95%; */
    margin: auto;
  }

  .userList-top {
    display: flex;
    margin-top: 2px;
    margin-bottom: 20px;
    height: 46px;
    border-bottom: 2px solid #e6e6e6;

    .list-item {
      margin-right: 40px;
    }

    span {
      font-size: 16px;
      color: #666666;
      display: inline-block;
      height: 100%;

      &.span-active {
        // color: #2a8e7c;
        color: #368ED9;
        border-bottom: 2px solid #368ED9;
      }
    }
  }

  .top-btn>button {
    cursor: pointer;
    // width: 100px;
    height: 30px;
    // border-radius: 15px;
    // background: #FFFFFF;
    // color: #3D7EFF;
    background-color: #fff;
    color: #999999;
    outline: none;
    font-weight: bold;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .top-btn>.tabActive {
    // background: #3D7EFF;
    // color: #FFFFFF;
    color: #529FFF;
    // width: 110px;
    border-bottom: 2px solid #529FFF;

  }

  .webjurisdictionItem:last-child {
    /* margin-right: 0; */
  }

  .webjurisdictionItem .list-body {
    border: none;
  }

  .jurisdictionTitle {
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    background: #E3E7EC;
    text-align: center;
    line-height: 30px;
  }



  .webjurisdictionItem table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .webjurisdictionItem table td {
    word-break: break-all;
    word-wrap: break-word;
    font-size: 14px;
    font-weight: 600;
  }

  th,
  td {
    text-align: left;
  }

  .tree-table .td1 {
    width: 20%;
    padding-left: 2%;
  }

  .tree-table .td2 {
    width: 17%;
  }

  .tree-table .td3 {
    width: 18%;
  }

  .tree-table .td4 {
    width: 29%;
  }

  .tree-head {
    background: rgb(220, 236, 242);
    padding: 0.08rem 0;
  }

  .tree-head td {
    color: rgb(19, 154, 230);
    box-sizing: border-box;
  }
</style>